<template>
  <div class="content" v-loading="submitBtn || loading">
    <div class="scroll-view-box">
      <el-form label-width="120px" :inline="true" :model="formData" :rules="formRules" ref="elFrom"
        label-position="top">
        <div class="user-title-box">增减项金额</div>
        <el-form-item label="增/减项基础装修费" prop="basic_decoration_fee">
          <el-input class="input-width" v-model="formData.basic_decoration_fee" placeholder="请输入增/减项基础装修费"
            v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="增/减项主材采购费" prop="material_costs">
          <el-input class="input-width" v-model="formData.material_costs" placeholder="请输入增/减项主材采购费" v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="增/减项税金" prop="quotation_taxes">
          <el-input class="input-width" v-model="formData.quotation_taxes" placeholder="请输入增/减项税金" v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="优惠金额" prop="discount_amount">
          <el-input class="input-width" v-model="formData.discount_amount" placeholder="请输入优惠金额" v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <div class="user-title-box">成本金额</div>
        <el-form-item label="增/减项现场采购成本" prop="procurement_cost">
          <el-input class="input-width" v-model="formData.procurement_cost" placeholder="请输入增/减项现场采购成本"
            v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="增/减项公司集采成本" prop="centralized_procurement_cost">
          <el-input class="input-width" v-model="formData.centralized_procurement_cost" placeholder="请输入增/减项公司集采成本"
            v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="增/减项管理成本" prop="management_costs">
          <el-input class="input-width" v-model="formData.management_costs" placeholder="请输入增/减项管理成本" v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <div class="user-title-box">总计</div>
        <el-form-item label="增减项金额">
          <el-input class="input-width" :value="countMoney('bj')" disabled v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="成本金额">
          <el-input class="input-width" :value="countMoney('cb')" disabled v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="利润金额">
          <el-input class="input-width" :value="countMoney('lr')" disabled v-input-limit="2">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="利润率">
          <el-input class="input-width" :value="countMoney('lrl')" disabled v-input-limit="2">
            <span slot="suffix">%</span>
          </el-input>
        </el-form-item>
        <div class="user-title-box">附件</div>
        <el-form-item label="报价附件 (.ppt,.xls,.pdf,.doc,.docx,.xlsx)" prop="quotation_file">
          <div class="file-list-box">
            <div class="file-item-box" v-for="(item, index) in formData.quotation_file" :key="index">
              <div class="el-icon-delete-box" @click="delFileFunc(index, 'quotation_file')">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <img class="img" :src="item.src" />
              </el-tooltip>
            </div>
            <el-upload accept=".ppt,.xls,.pdf,.doc,.docx,.xlsx" class="avatar-uploader" action="#"
              :show-file-list="false" :auto-upload="false" list-type="picture-card"
              :on-change="(file) => { changeFile(file, 'quotation_file') }">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="成本附件 (.ppt,.xls,.pdf,.doc,.docx,.xlsx)" prop="cost_list_file">
          <div class="file-list-box">
            <div class="file-item-box" v-for="(item, index) in formData.cost_list_file" :key="index">
              <div class="el-icon-delete-box" @click="delFileFunc(index, 'cost_list_file')">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <img class="img" :src="item.src" />
              </el-tooltip>
            </div>
            <el-upload accept=".ppt,.xls,.pdf,.doc,.docx,.xlsx" class="avatar-uploader" action="#"
              :show-file-list="false" :auto-upload="false" list-type="picture-card"
              :on-change="(file) => { changeFile(file, 'cost_list_file') }">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="利润附件 (.ppt,.xls,.pdf,.doc,.docx,.xlsx)" prop="profit_statement_file">
          <div class="file-list-box">
            <div class="file-item-box" v-for="(item, index) in formData.profit_statement_file" :key="index">
              <div class="el-icon-delete-box" @click="delFileFunc(index, 'profit_statement_file')">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <img class="img" :src="item.src" />
              </el-tooltip>
            </div>
            <el-upload accept=".ppt,.xls,.pdf,.doc,.docx,.xlsx" class="avatar-uploader" action="#"
              :show-file-list="false" :auto-upload="false" list-type="picture-card"
              :on-change="(file) => { changeFile(file, 'profit_statement_file') }">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <template v-if="hisFileData">
          <div class="user-title-box">历史附件</div>
          <el-form-item label="报价附件">
            <div class="file-list-box">
              <template v-for="(item, index) in hisFileData.quotation_file">
                <div class="file-item-box" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                    <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                  </el-tooltip>
                </div>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="成本附件">
            <div class="file-list-box">
              <template v-for="(item, index) in hisFileData.cost_list_file">
                <div class="file-item-box" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                    <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                  </el-tooltip>
                </div>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="利润附件">
            <div class="file-list-box">
              <template v-for="(item, index) in hisFileData.profit_statement_file">
                <div class="file-item-box" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                    <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                  </el-tooltip>
                </div>
              </template>
            </div>
          </el-form-item>
        </template>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveSubmit" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import idiApi from '@/api/increaseDecreaseItemsApi';

export default {
  name: 'idi_quotation',
  data() {
    let validateFileList = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择'));
      } else {
        callback();
      }
    };
    return {
      hisFileData: '',

      loading: false,
      changeInfo: {},
      editType: 'add',
      formData: {
        quotation_amount: null,
        basic_decoration_fee: "",
        material_costs: "",
        quotation_taxes: "",
        cost_amount: null,
        procurement_cost: "",
        centralized_procurement_cost: "",
        management_costs: "",
        profit_amount: null,
        quotation_file: [],
        profit_statement_file: [],
        cost_list_file: [],
        discount_amount: ''
      },
      formRules: {
        basic_decoration_fee: { required: true, message: "请输入基础装修费用", trigger: "change" },
        material_costs: { required: true, message: "请输入主材采购费用", trigger: "change" },
        quotation_taxes: { required: true, message: "请输入税金", trigger: "change" },
        procurement_cost: { required: true, message: "请输入现场采购成本", trigger: "change" },
        centralized_procurement_cost: { required: true, message: "请输入公司集采成本", trigger: "change" },
        management_costs: { required: true, message: "请输入管理成本", trigger: "change" },
        quotation_file: { required: true, validator: validateFileList, trigger: "change", },
        profit_statement_file: { required: true, validator: validateFileList, trigger: "change" },
        cost_list_file: { required: true, validator: validateFileList, trigger: "change" },
      },
      submitBtn: false,
    };
  },
  computed: {
    countMoney() {
      return (type) => {
        return this.getCountMoney(type);
      };
    },
  },
  mounted() {
    let id = this.$route.query.sn
    if (id) {
      idiApi.getChangeDetails({ change_id: id }).then(res => {
        console.log(res, '增减项详情')
        if (res.code == 200) {
          this.changeInfo = res.data;

          // 获取历史报价
          var changeInfo = res.data;
          var arr = [];
          changeInfo.log_list.map(item => {
            if (item.change_status == 20) {
              arr.push(item);
            }
          })
          // 历史附件
          let hisFileData = '';
          res.data.log_list.forEach(item => {
            if (item.change_status == 20 && !hisFileData) {
              hisFileData = JSON.parse(item.form_data);
            }
          });
          console.log(hisFileData, "历史附件")
          this.hisFileData = hisFileData;

          if (arr.length > 0) {
            let item = JSON.parse(arr[0].form_data);
            this.formData.basic_decoration_fee = item.basic_decoration_fee;
            this.formData.material_costs = item.material_costs;
            this.formData.quotation_taxes = item.quotation_taxes;
            this.formData.procurement_cost = item.procurement_cost;
            this.formData.centralized_procurement_cost = item.centralized_procurement_cost;
            this.formData.management_costs = item.management_costs;
            this.formData.change_amount = item.change_amount;
            this.formData.discount_amount = item.discount_amount;
          }
        }
        this.loading = false
      })
    }
  },
  methods: {
    // 计算
    getCountMoney(type) {
      let res = 0;
      let cjzjdRuleForm = this.formData;
      let val1 = cjzjdRuleForm.basic_decoration_fee
        ? Number(cjzjdRuleForm.basic_decoration_fee)
        : 0;
      let val2 = cjzjdRuleForm.material_costs
        ? Number(cjzjdRuleForm.material_costs)
        : 0;
      let val3 = cjzjdRuleForm.quotation_taxes
        ? Number(cjzjdRuleForm.quotation_taxes)
        : 0;
      let val4 = cjzjdRuleForm.procurement_cost
        ? Number(cjzjdRuleForm.procurement_cost)
        : 0;
      let val5 = cjzjdRuleForm.centralized_procurement_cost
        ? Number(cjzjdRuleForm.centralized_procurement_cost)
        : 0;
      let val6 = cjzjdRuleForm.management_costs
        ? Number(cjzjdRuleForm.management_costs)
        : 0;
      let val7 = cjzjdRuleForm.discount_amount
        ? Number(cjzjdRuleForm.discount_amount)
        : 0;
      let bj = Math.floor((val1 + val2 + val3 - val7) * 100) / 100;
      let cb = Math.floor((val4 + val5 + val6 + val3) * 100) / 100;
      let lr = Math.floor((bj - cb) * 100) / 100;
      let lrl = 0;
      if (lr == 0) {
        lrl = 0;
      } else if (cb == 0) {
        lrl = 100;
      } else {
        lrl = Math.floor((lr / cb) * 10000) / 100;
      }
      switch (type) {
        case "bj":
          res = bj;
          break;
        case "cb":
          res = cb;
          break;
        case "lr":
          res = lr;
          break;
        case "lrl":
          res = lrl;
          break;
      }
      if (type == "all") {
        return {
          bj,
          cb,
          lr,
          lrl,
        };
      }
      return res;
    },
    // 选择文件
    changeFile(file, name) {
      this.$videoPost(file, (e => {
        this.formData[name].push(e)
      }));
    },
    // 删除文件
    delFileFunc(idx, name) {
      this.formData[name].splice(idx, 1);
    },
    // 提交
    saveSubmit() {
      this.$refs['elFrom'].validate((valid) => {
        if (valid) {

          let amount = this.getCountMoney("all");
          let formData = this.formData
          let formdata = new FormData();
          let obj = {
            project_id: this.changeInfo.project_id,
            change_id: this.changeInfo.id,
            change_amount: amount.bj,
            quotation_amount: amount.bj,
            basic_decoration_fee: formData.basic_decoration_fee,
            material_costs: formData.material_costs,
            quotation_taxes: formData.quotation_taxes,
            cost_amount: amount.cb,
            procurement_cost: formData.procurement_cost,
            centralized_procurement_cost: formData.centralized_procurement_cost,
            management_costs: formData.management_costs,
            profit_amount: amount.lr,
            profit_ratio: amount.lrl,
            discount_amount: formData.discount_amount || 0,
            remark: ''
          }
          console.log(obj);
          formdata.append('data', JSON.stringify(obj))
          formData.quotation_file.forEach(item => {
            formdata.append('quotation_file[]', item.raw);
          })
          formData.profit_statement_file.forEach(item => {
            formdata.append('profit_statement_file[]', item.raw);
          })
          formData.cost_list_file.forEach(item => {
            formdata.append('cost_list_file[]', item.raw);
          })

          this.submitBtn = true;
          idiApi.issueChangeQuotation(formdata).then(res => {
            console.log(res, '出具造价单')
            if (res.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
              this.cancelFunc()
            } else {
              this.$message.error(res.message);
            }
            this.submitBtn = false;
          })
        } else {
          return false;
        }
      });
    },
    // 取消
    cancelFunc() {
      this.$goBackTab(this);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/addPage.scss";
</style>